<!--
 * @Description:
 * @Author: 萧盼盼的泰迪
 * @Date: 2021-06-24 16:17:13
 * @LastEditors: 萧盼盼的泰迪
 * @LastEditTime: 2021-07-01 21:15:06
-->
<template>
  <!-- 资讯评论审核 -->
  <div>
    <div class="search">
      <el-form
        :inline="true"
        :model="searchform"
        size="mini"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-button type="danger" size="mini" @click="tobatchDelete"
            >批量删除</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchform.keywords"
            clearable
            placeholder="请输入关键字"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div>
      <el-table
        stripe
        ref="multipleTable"
        align="center"
        size="mini"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" align="center" width="50" label="序号" />
        <el-table-column prop="comment" align="center" label="评论内容" />
        <el-table-column
          prop="userId"
          align="center"
          label="评论人编号"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          prop="articleId"
          label="资讯编号"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          prop="commentTime"
          label="评论时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ moment(scope.row.commentTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="评论状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '通过'" type="success">{{
              scope.row.status
            }}</el-tag
            ><el-tag v-else-if="scope.row.status === '不通过'" type="danger">{{
              scope.row.status
            }}</el-tag>
            <el-tag v-else type="info">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button
              :disabled="
                scope.row.status === '通过' || scope.row.status === '不通过'
              "
              type="text"
              size="small"
              icon="el-icon-check"
              @click="tocheckPass(scope.row.id)"
              >通过</el-button
            >
            <el-button
              :disabled="
                scope.row.status === '通过' || scope.row.status === '不通过'
              "
              type="text"
              size="small"
              icon="el-icon-close"
              class="red_info"
              @click="tocheckNoPass(scope.row.id)"
              >不通过</el-button
            >
            <el-button
              type="text"
              size="small"
              icon="el-icon-delete"
              class="warning_info"
              @click="todeleteById(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-div">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 15, 20, 30]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { pageQuery, check, batchDelete, deleteById } from "@/api/infoComment";
import { showFileURL, uploadFileURL } from "@/utils/config";

export default {
  data() {
    return {
      showFileURL,
      uploadFileURL,
      searchform: {
        keywords: "",
        status: "",
      },
      tableData: [],
      ids: [],
      params: {
        page: 1,
        pageSize: 10,
      },
      // 总条数
      total: 0,
      // 加载
      loading: false,
      // 模态框的显示与隐藏
      visible: false,
      // 表单数据
      form: {},
      // 表单控件标题的宽度
      formLabelWidth: "80px",
      Pass: {
        status: "通过",
      },
      noPass: {
        status: "不通过",
      },
    };
  },
  computed: {},
  watch: {
    // 深度监听分页参数
    params: {
      handler() {
        this.queryData();
      },
      deep: true,
    },
  },
  created() {
    this.queryData();
  },
  mounted() {},
  methods: {
    moment,
    // toggleSelection(rows) {
    //   if (rows) {
    //     rows.forEach((row) => {
    //       this.$refs.multipleTable.toggleRowSelection(row);
    //     });
    //   } else {
    //     this.$refs.multipleTable.clearSelection();
    //   }
    // },
    handleSelectionChange(val) {
      this.ids = val.map((item) => item.id);
    },
    // 批量删除
    async tobatchDelete(ids) {
      this.$confirm("此操作将永久删除该评论，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await batchDelete({ ids: this.ids });
          this.$message({
            title: "success",
            message: "删除成功！",
          });
          this.queryData();
        })
        .catch(() => {
          this.$message({
            title: "info",
            message: "已取消删除！",
          });
          this.queryData();
        });
    },

    async queryData() {
      this.loading = true;
      // 合并对象
      // 处理数据
      const temp = {
        ...this.params,
        ...this.searchform,
      };
      // 遍历对象
      for (const key in temp) {
        // key是一个变量，代表的属性名
        // key 'page'   temp.key  temp[key]
        // key是属性名  temp[key]属性值
        // console.log(key, temp[key]);
        if (!temp[key]) {
          delete temp[key];
        }
      }
      // if(temp.commentTime.length>0){
      // temp.beginTime=temp.commentTime[0]
      // temp.endTime=temp.commentTime[1]
      // delete temp.commentTime
      // }
      const res = await pageQuery(temp);
      // 加载完毕
      this.loading = false;
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    // 查询按钮点击事件处理程序
    toSearch() {
      this.queryData();
    },
    // 每页显示的条数发生变化时的事件处理程序
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      // this.params.pageSize = val;
      // this.params.page = 1;
      this.params = {
        page: 1,
        pageSize: val,
      };
      // this.queryData()
    },
    // 当前页码发生变化时的事件处理程序
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.page = val;
      // this.queryData()
    },

    // 删除
    todeleteById(id) {
      this.$confirm("此操作将永久删除该评论，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await deleteById({ id });
          this.$notify.success({
            title: "成功",
            message: res.message,
          });
          this.queryData();
        })
        .catch(() => {
          this.$notify.info({
            title: "取消",
            message: "已取消删除",
          });
        });
    },
    // async todeleteById(id) {
    //   let res = await deleteById({ id });
    //   this.$notify.success({
    //     title: "成功",
    //     message: res.message,
    //   });
    //   this.queryData();
    // },
    // 通过
    async tocheckPass(id) {
      const temp = {
        id,
        ...this.Pass,
      };
      const res = await check(temp);
      this.$notify.success({
        title: "成功",
        message: res.message,
      });
      this.queryData();
    },
    // 不通过
    async tocheckNoPass(id) {
      const temp = {
        id,
        ...this.noPass,
      };
      const res = await check(temp);
      this.$notify.success({
        title: "成功",
        message: res.message,
      });
      this.queryData();
    },
  },
};
</script>
<style scoped>
</style>
